Any Shape Button Designer dialog box -- Bevel
Any Shape Button Designer dialog box
  Basic	  Light	  Warping
  Bevel	  Shadow

Thumbnail window Displays the selected object or selection area. Click and drag the control points to adjust the light direction.

Preview window Displays the button with the selected attributes applied.

Bevel size Adjusts the size of the bevel edge on the button. The higher the value, the wider the bevel edge.

Bevel smoothness Rounds the edges of the bevel to creater a smoother 3D button. The higher the value, the smoother the bevel.

Pressed Inverts the Light angle to make the button look as if it has been pressed or selected.

Outer Applies the bevel to the outer edge of the button area.

Bevel type Displays a range of bevel styles. Click a style to apply it to the button.

Symmetric Duplicates the bevel style on the opposite edges of the button.

Show .bevel Displays the selected bevel style in the preview window as a black and white mask.

Fine control Provides greater control over the bevel of the button.

Repeat Duplicates the bevel on the button to create a new bevel style.

Preview Select Apply on image and click Preview to see how the texture will look.

Add Adds the custom button and settings to the EasyPalette.


Any Shape Button Designer dialog box -- Light
Any Shape Button Designer dialog box
  Basic	  Light	  Warping
  Bevel	  Shadow

Thumbnail window Displays the selected object or selection area. Click and drag the control points to adjust the light direction.

Preview window Displays the button with the selected attributes applied.

Lights Select the number of lights to be shone on the button.

Highlight Adjusts the overall highlight value of the light shone on the button.

Shadow Adjusts the overall ambient value of the light shone on the button.

Face brightness Adjusts the brightness or darkness of the button face.

  Click a light to individually adjust its settings.

Angle Enter a value (in degrees) for the direction of light. You can also adjust the lighting by dragging the control point on the thumbnail window.

Elevation Click and drag the red control point or enter a value to adjust the position of the light on the z axis. A value of 90 positions the light directly above the button.

Light value Adjusts the strength of the light.

Specular Adjusts the strength of specular light.

Light color Click the color preview to select a new light color.

Preview Select Apply on image and click Preview to see how the texture will look.

Add Adds the custom button and settings to the EasyPalette.


Any Shape Button Designer dialog box -- Shadow
Any Shape Button Designer dialog box
  Basic	  Light	  Warping
  Bevel	  Shadow

Thumbnail window Displays the selected object or selection area. Click and drag the control points to adjust the light direction.

Preview window Displays the button with the selected attributes applied.

Shadow Applies a drop shadow to the button. Select a style from the list below:

Applies a basic drop shadow in one direction.

Applies a shadow around all edges of the button. Use this to create a “glow” effect.

Applies a shadow to both the inner and outer edges of the button.

X offset Adjusts the distance of the shadow from the left or right edges of the button.

Y offset Adjusts the distance of the shadow from the top or bottom edges of the button.

Transparency Adjusts the transparency of the shadow. The lower the value, the more opaque the shadow.

Glow Adjusts the size of the shadow around the edges of the button (only available for the last two shadow styles).

Soft edge Softens the edges of the shadow so it blends with the background image.

Color Click the color preview to change the color of the drop shadow.

Preview Select Apply on image and click Preview to see how the texture will look.

Add Adds the custom button and settings to the EasyPalette.


Any Shape Button Designer dialog box -- Warping
Any Shape Button Designer dialog box
  Basic	  Light	  Warping
  Bevel	  Shadow

Thumbnail window Displays the selected object or selection area. Click and drag the control points to adjust the light direction.

Preview window Displays the button with the selected attributes applied.

Warping Applies a distortion effect to the button.

Smoothness Rounds the warping of the bevel to create a smoother 3D button.

Warp level Adjusts the strength of the distortion.

Preview Select Apply on image and click Preview to see how the texture will look.

Add Adds the custom button and settings to the EasyPalette.


Creating buttons: Rectangular
Creating buttons
  Regular	  Irregular

Use PhotoImpact’s Button Designer to create 3D buttons for your web site or presentation.

1.	Open an image or select a portion of an image to use for the button face.

2.	Click Web: Button Designer.

3.	Select Inward if you want to limit the size of the button to the current image dimensions. Select Outward if you wish to add a border to the image.

Select the style you wish to use for your button.

4.	Type the size in pixels for the button border. Clear Mirror if you wish to set each border size independently.

5.	Select colors and their transparencies for the borders.

6.	Click OK.


You may only select Inward for the full-picture button style, (fourth Style choice).


Creating buttons: Irregularly shaped
Creating buttons
  Regular 	  Irregular

For unique buttons, create a button from an irregularly shaped selection area.

1.	Make a selection area using the Lasso  [image]  or Magic Wand  [image]  Tool.

2.	Click Web: Button Designer: Any Shape.

3.	Adjust the settings for the button in the Any Shape Button Designer dialog box.

  Irregular button - Inner

  Irregular button - Outer

  Any Shape Button Designer dialog box


This help file contains topics about selected dialog boxes in your PhotoImpact package. You can access these topics through those dialog boxes or by navigating through a main help file associated with one of the PhotoImpact programs.


Button Designer (Rectangular) dialog box

Create 3D buttons quickly with the Button Designer.

Style Click a style that most closely illustrates the type of button you wish to create.

Direction Select Outward to expand the size of the image to create the button. Select Inward to constrain the size of the button to the current image or selection dimensions.

Options Determines the size, color, and other attributes for the button border.

Mirror Synchronizes all the top and left edges, and the right and bottom edges as you adjust the bevel width.

Mirror All Synchronizes all four edges as you adjust the bevel width.

Width Set the width of the selected edge.

Transparency Set how much of the base image should show through the button border.

Colors / Controls Depending on the type of button, choose the colors to use for button borders or adjust other color attributes.

Preview window Shows an example of how your button will look. If the image is larger than the preview window, PhotoImpact automatically resizes it to fit. Otherwise the image appears at its actual size.

Quick samples Choose from preset button settings to create a button with a single click. You can always fine tune the settings if you wish.

Add Adds the custom button and settings to the EasyPalette.

  Creating buttons: Rectangular

  Creating buttons: Irregularly shaped


Any Shape Button Designer dialog box - Basic
Any Shape Button Designer dialog box
  Basic	  Light	  Warping
  Bevel	  Shadow

Thumbnail window Displays the selected object or selection area. Click and drag the control points to adjust the light direction.

Preview window Displays the button with the selected attributes applied.

Light angle Enter a value (in degrees) for the direction of light. You can also adjust the lighting by dragging the control point on the thumbnail window.

Light elevation Click and drag the red control point or enter a value to adjust the position of the light on the z axis. A value of 90 positions the light directly above the button.

Bevel size Adjusts the width of the bevel. A higher value will produce a wider bevel.

Bevel smoothness Adjusts the angle of the bevel in relation to the face of the button. A higher value will create a rounded bevel, and a lower value a chiseled bevel.

Pressed Inverts the Light angle to make the button look as if it has been pressed or selected.

Outer Adds the bevel to the outer edge of the selection area. The bevel uses the base image or background color.

Preview Select Apply on image and click Preview to see how the texture will look.

Add Adds the custom button and settings to the EasyPalette.

  Creating buttons: Rectangular

  Creating buttons: Irregularly shaped


Background Designer dialog box

Allows you to create unique patterns for backgrounds on web pages or other presentation materials.

Generate a new tile Creates a new image containing one tile of the new texture. You can then save this image for your background. Always select this when designing a texture for a web page.

Apply to Image Applies the texture to the currently active image.

Cell Size Determine how big the base tile for the pattern tile will be.

Preview Window Shows a thumbnail view of the pattern you are creating.

Schema Choose a type of texture to apply to your image.

Preset gallery Displays preset groups of patterns for each Schema selected.

Background type Choose a pattern to set the tone for how the texture is created.

Palette ramp Displays the range of colors to include in the pattern.

Edit Palette Click to change or remove colors from the palette ramp. You can also chose from a series of other predefined ramps.

Frequency Adjusts the sharpness of the pattern edges.

Density Determine the number of tiles to use to create a complete tile.

Amplitude Adjusts the level of contrast between light and dark areas.

Darken or Lighten A positive value lightens the pattern, a negative value darkens it. Select zero to retain the original brightness.

Preview Select Apply on image and click Preview to see how the texture will look.

Add Adds the custom settings to the EasyPalette.


Trace dialog box ;
Trace dialog box

Creates a vector based object from the selection or object. When this dialog box closes, the Path tool  [image]  becomes the active tool and the current object has a four-point bounding box.

Show path only Select to show only the vector path in the right hand preview window.

Tolerance Set a low value to trace the selection most accurately.

Jump Point Set a low value to create smoother curves. Set a higher value to save time but obtain curves composed of straighter line segments.

Threshold Set the luminance value for deciding which pixels to include in the trace. All pixels with values below this setting are included.


Background Designer

Allows you to create unique textured backgrounds ideally suited for use as backgrounds for web pages.

  Background Designer dialog box


Button Designer

Select from the submenu to quickly create regular or irregular 3-dimensional buttons. You may use any True Color or grayscale image or selection as a source for the button's face.

  Creating buttons: Rectangular

  Creating buttons: Irregularly shaped

  Button Designer (Rectangle) dialog box

  Button Designer (Any Shape) dialog box


Grid and Partition
Grid & Partition

Segments your image into a grid of objects. This is useful if you are creating a navigation image for your web site and want to split the main image up into smaller navigation images. This command can only be used on True Color images.


Grid and Partition dialog box
Grid & Partition dialog box

Creates several objects from an image. This is useful if you are using a large image as a navigational device on your web page and want to create several smaller images for each navigation image. This command can only be used on True Color images.

Row / Column Select the number of rows and columns to create a grid from.

Grid line Enter the width of the grid line separating each cell.

Color Select the border and grid line color.

Draw border line Draws a border around the perimeter of the image in the selected color.

Convert cells to objects Converts the cells in the grid to objects. The objects are initially locked in position. Click Object: Properties (Position and Size tab) and clear Lock.


Image Slicer

Divides a large image into several small ones, making it easier to see a preview of the graphic as it downloads. Image Slicer outputs the HTML table code which you can send directly to your Web site.

  Image Slicer dialog box

  Slicing an image


Slicing an image

1.	Click Web: Image Slicer.

2.	Slice your image into the desired number of portions.

To slice it evenly, click [image] and enter the number of rows and columns that you want your image to be cut into.

To delete an entire line, click [image] and click a specific line that you want to remove. However, if you want to remove only a particular segment or the line in a specific cell, hold the Ctrl key down while clicking.

To add a line(s), click [image] and drag your mouse on your workspace to draw additional line(s).

To clear all lines, click [image].

3.	Enter the URL address of the site where you want your sliced image to appear.

4.	Enter the target and Alt text for your image.

5.	Choose a file format to save your image as. (Also see "file formats"). Click the Optimizer Options [image] to save your image in Image Optimizer. This further reduces the file size, thereby diminishing download time on the Web.

6.	Click Save As to save your image as well as the slicing information in HTML format. PhotoImpact also saves all the image cells as individual files depending on the image file format you specify.


Image Slicer dialog box

Status information Displays the active cell information and current mouse position relative to the upper left corner of the workspace.

Line color Opens the Ulead Color Picker to let you select a color for your lines.

Working area Shows the source image as your background. This is where you can specify how your image will be sliced.

Tool options Use these tools to define sliced cells in the working area.

Cell properties for current selection Defines the properties of the currently selected cell.

URL Type the location for the Web page where you want your sliced image to appear.

Target Specifies the target frame for the URL to be opened.

Alt text Type the alternate text that appears if the image doesn't load or if you have all images disabled in your Web browser.

Optimizer Specify settings for Image Optimizer to optimize your sliced images. Select an image file format to save your image to as well as its corresponding preset settings to use. Click the Optimizer Options button to launch the Image Optimizer module.

Cells Displays all the sliced cells.


Tool Options

Use these tools to define sliced cells on your workspace. Click below to learn more about each item.

Viewing Options	Cell Attributes

Slice Mode	Import / Export Table Data

 Erase all sliced lines Clears the workspace by removing all rows and columns, thus allowing you to create new slices.

 Quick preview of compressed data Allows you to see a preview of your image after compression before putting it up on your Web site.


Viewing Options

Allows you to change the magnification for the image on your working area.

Zoom in Increases the magnification on your image.

Zoom out Reduces the magnification on your image.

Show actual size Resizes the image to 1x (100 %) magnification.

Fit in window Resizes the current image to the largest magnification that will completely fit in a window.

Center in window Places the center of the current image in the middle of the working area. If Fit in window is previously selected, clicking Center in window does not change the view.


Slice Mode

Pick mode Makes the entire line active, allowing you to move it around the workspace. Clicking a line while holding the Ctrl key down only selects a particular segment of a cell.

Add sliced line mode Allows you to "draw" a new portion(s) by dragging your mouse on the workspace.

Erase sliced line mode Deletes an entire line(s) across your image. But clicking a line while holding the Ctrl key down only removes a particular segment of a cell.

Slice evenly Allows you to divide your image in even proportion.


Cell Attributes

Allows you to copy the attributes or properties of a cell to another or to all.

Copy cell attributes Copies the attributes or properties of a selected cell to the clipboard.

Paste cell attributes Places the contents of the clipboard to the currently selected cell.

Paste cell attributes to all Places the contents of the clipboard to all cells.

Copy HTML sliced table codes to clipboard Copies the HTML table code of your sliced image to the clipboard, allowing you to edit them manually or use them in other HTML files.


Import / Export Table Data

Import table data Opens the Import Sliced Table File dialog box for acquiring a previously saved table data in the *.USS format and using it in your current image.

Export table data Opens the Export Sliced Table File dialog box for saving the table data of your current image to a folder you specify.


Image Map Assistant

Allows you to create hyperlink "hotspots" on your images. Simply select an area or areas of your image, then type in the URL of the link. The Image Map outputs the HTML code that you can send directly to your Web site.

  Image Map Assistant dialog box

  Defining image map tags


Image Map Assistant dialog box

Before creating an image map for your Web page, make sure that there is at least one active selection or object.

Working area Displays the entire active image with your marked selection area. Click a selection to change its image map settings.

Viewing options Allows you to change the magnification for the image on your working area.

Copy/Paste options
Copies and places URL, target and Alt string to the clipboard.

Copy HTML  [image]  Copies the HTML codes to the clipboard.

Object name Lists the names given to selected areas and objects. Select each name one at a time to specify mapping properties. (Object names can be changed in the Object Properties dialog box.)

Object properties for current selection Displays the properties of the currently selected object. (The URL and auto-detect type can also be set in the Object Properties dialog box.)

URL Type the location for the Web page that you want to link to the map tag.

Target Specifies the target frame for the URL to be opened.

Alt text Type the alternate text that appears if the image doesn't load or if you have all images disabled in your Web browser.

Type
Specify the type of shape you will create in the image map and its coordinates. Choose from Auto-detect, Rectangle, Circle, and Polygon.

HTML codes Displays and allows you to edit the <AREA> tag codes for current selection.

Optimizer Select a file format to save the final image as and its options. Click the Image Optimizer button to open the Image Optimizer dialog box for optimizing your image in order to reduce file size and minimize loading time.

Export Click to save the image map as an HTML or image file.

Browser Preview Click to see a preview of the final image in your Web browser before actually putting it up on the Web.

  Defining image map tags


Java Rollover Assistant

Allows you to design Java rollover buttons for your Web page. All you need is a series of objects or images to create a button, which Java Rollover Assistant automatically exports in HTML format.

  Java Rollover Assistant dialog box

  Enabling Java Rollover Assistant


Java Rollover Assistant dialog box

Default Select an object from the list to make it the default image on your button.

Mouse Over Select an object to make it appear when you move your mouse over the button.

Mouse Down Select an object to make it appear when you click the button.

X and Y Offset X-offset defines the number of pixels away from the original object that the default button lies on the horizontal plane, while Y-offset defines how it lies on the vertical plane.

URL Type the location for the Web page where you want your Java Rollover button to be linked to.

Target Specifies the target frame for the URL to be opened.

Alt text Type the alternate text that appears if the image doesn't load or if you have all images disabled in your Web browser.

Preview Allows you to see a preview of your button before you actually put it up on the Web.

Background Displays the current color for your background. Click to open the Ulead Color Picker for changing the color.

Optimizer Select to specify which file format you want to save your image as. This prompts Image Optimizer to save your images with the highest possible quality at the lowest possible file size.

Click the Image Optimizer button to open its dialog box for configuring the settings for the selected file format.

Export Saves all your button images along with an HTML file to a folder using the specified settings.

Browser Preview Allows you to see how your button appears on the Web by opening your default browser.


Enabling Java Rollover Assistant

Before creating a Java Rollover button, make sure you have at least three objects for your changing buttons.

To enable Java Rollover Assistant:

1.	Click Web: Java Rollover Assistant.

2.	Select an object or image for your default button, your mouse over, and for your mouse down buttons.

3.	Enter a value on the X and Y Offset box. X-offset defines the number of pixels away from the original object that the default button lies on the horizontal plane, while Y-offset defines how it lies on the vertical plane.

4.	Specify a location for the Web page where you want your button to appear, as well as the target frame and the alternate text that appears if the image doesn't load or if you have all images disabled in your Web browser.

5.	Select a color for your preview background. The color should be the background color of your Web page so you'll know how your button actually looks on your site.

6.	Choose a file format to save your image as. Then click Options. This opens the Image Optimizer dialog box for optimizing your image based on the settings you specify. Image Optimizer then saves your images with the highest possible quality at the lowest possible file size.

7.	Click Browser Preview to see how your button actually looks on your Web site by opening your default browser.

8.	If you're satisfied with the way your button looks on the page, click Export. This saves all your finished button images and an HTML file to a folder based on the specified settings.


Image To Optimize dialog box

Select whether to save the base image along with all the objects merged together or just the base image or the currently selected objects before opening the Image Optimizer dialog box.


Defining image map tags

Image maps allow you to create links to web pages by creating hotspots on an image, path or text object. You can select a single object or make multiple selections at a time and customize the hotspots for each one of them.

1. 	Switch back to PhotoImpact and select the image(s), path(s) or text object(s) you want to map. To map specific areas in an image, use the Standard Selection  [image]  or Lasso Tool,  [image]  to create the selection areas you want.

2.	Click Web: Image Map Assistant.

3.	Click a selection in the image window of the Image Map Assistant dialog box or select its name from the Object name drop-down list to specify mapping properties for it. (A default object name is given to each image, selection area, path or text object.)

4. 	Enter the URL for the selected area or object in the URL text box, the target frame, and the alternate text that would appear if the image doesn't load or if you have all images disabled in your Web browser.

5. 	Click [image] to copy the Tag information to the clipboard so you can paste it in your HTML document.

 Repeat these steps for each selected area or object you wish to make as a hotspot.

  Image Map Assistant dialog box


For best results work from the top left region across and down the image, making sure that none of the mapped regions overlap.